<template>
   <div class="seckill">
      <div class="seckill-title">
         <h4>京东秒杀</h4>
         <div class="seckill-time">
            <van-count-down :time="time" @finish="change" :auto-start="true" ref="countDown">
               <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
               </template>
            </van-count-down>
         </div>
      </div>
      <div class="seckill-goods">
         <van-grid :column-num="6">
            <van-grid-item v-for="commodity in list" :key="commodity.proid" :icon="commodity.img1">
               <img :src="commodity.img1">
               <p>￥{{ commodity.originprice }}</p>
            </van-grid-item>
         </van-grid>
      </div>
   </div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import { timeList } from '@/service/api';
const time = ref(60 * 60 * 1000);
const count = ref(1);
const limitNum = ref(6);
const list = ref<TimeList[]>();
const countDown = ref()
type TimeList = {
   banners: string[],
   desc: string,
   originprice: number,
   category: string,
   brand: string,
   proname: string,
   proid: string,
   img1: string
}

onMounted(async () => {
   const result = await timeList(count.value, limitNum.value);
   list.value = result.data.data;
})

const change = async () => {
   count.value++;
   const result = await timeList(count.value, limitNum.value)
   list.value = result.data.data;
   countDown.value.reset();

}

</script>
<style lang="less" scoped>
.seckill {
   margin-top: 10px;
   background-color: #fff;
   padding: 15px 15px;

   .seckill-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      overflow: hidden;

      h4 {
         font-size: 16px;
      }

      .seckill-time {
         font-size: 12px;

         .block {
            display: inline-block;
            width: 16px;
            color: #fff;
            text-align: center;
            background-color: #e3251c;
         }

         .colon {
            padding: 0 2px;
         }
      }
   }

   .seckill-goods {
      font-size: 14px;
      display: flex;
      justify-content: space-evenly;

      .van-grid {
         flex-wrap: nowrap;
         justify-content: space-evenly;

         :deep(.van-grid-item__content) {
            padding: 0;
            font-weight: bold;
            color: rgb(253, 59, 59);

            img {
               width: 100%;
               height: 85%;
            }

            p {
               text-align: center;
               font-size: 14px;
               font-weight: 700;
               color: #e3251c;
               letter-spacing:-1px;
            }
         }
      }
   }

}
</style>